<template>
    <div id="app">
        <div class="box">
            <div>
                <template v-if="$PowerSelect(userPower, currentPagePower)">
                    <el-input class="l-input" v-model="search.keyWords" placeholder="关键字搜索"></el-input>
                    <el-button type="primary" class="l-margin-l15" v-on:click="getList">查询</el-button>
                </template>


                <el-button v-if="$PowerAdd(userPower, currentPagePower)" type="success" v-on:click="onAdd">新增</el-button>
            </div>
        </div>
        <div class="box">
            <el-table :data="list" border :height="`calc(100vh - 305px)`" :highlight-current-row="true">

                <el-table-column label="Col1字段" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.col1 }}
                    </template>
                </el-table-column><el-table-column label="Col2字段" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.col2 }}
                    </template>
                </el-table-column><el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createTime }}
                    </template>
                </el-table-column><el-table-column label="修改时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.updateTime }}
                    </template>
                </el-table-column>
                <el-table-column label="描述" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" v-if="$PowerUpdate(userPower, currentPagePower)" plain
                            v-on:click="onEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" v-if="$PowerDelete(userPower, currentPagePower)" plain
                            v-on:click="onDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="height: 10px">&nbsp;</div>
        <div class="box">
            <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                v-bind:current-page="currentPage" v-bind:page-sizes="[10, 20, 30, 40]" v-bind:page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
            </el-pagination>
        </div>
        <!--对话框-->
        <el-dialog :title="EditTitle" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%"
            custom-class="l-dialog">
            <div class="l-div-400">

                <el-form ref="form" :model="form" label-width="130px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="Col1字段">
                                <el-input v-model="form.col1" class="l-input-form" placeholder="Col1字段"></el-input>
                            </el-form-item><el-form-item label="Col2字段">
                                <el-input v-model="form.col2" class="l-input-form" placeholder="Col2字段"></el-input>
                            </el-form-item><el-form-item label="创建时间">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime"></el-date-picker>
                            </el-form-item><el-form-item label="修改时间">
                                <el-date-picker type="date" placeholder="选择日期" v-model="form.updateTime"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input v-model="form.remark" class="l-input-form" placeholder="描述">
                                </el-input>
                            </el-form-item>

                        </el-col>

                    </el-row>


                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="onSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import { GetTest1List, DeleteTest1, SaveTest1 } from '@/service/schoolapi';//地址改为实际地址
export default {
    data() {
        return {
            userPower: '',
            currentPagePower: '',
            search: {
                keyWords: ""
            },
            //分页 开始
            currentPage: 1,
            pagesize: 10,
            total: 0,
            reflushPageFlag: true,
            //分页 结束
            isAdd: true,
            list: [],
            dialogVisible: false,
            EditTitle: "",
            form: {
                id: "",
                remark: "",
                col1: "", col2: "", createTime: "", updateTime: "",
            },
        };
    },
    created() {

        this.currentPagePower = this.$route.query.powercode;
        this.userPower = localStorage.getItem("userPower");
        this.InitData();
    },
    watch: {},
    methods: {

        //初始化
        InitData() {

            if (this.$PowerSelect(this.userPower, this.currentPagePower)) {
                this.getList();
            }

        },
        //查询列表
        getList() {
            this.openLoading();
            this.list = [];
            var that = this;

            let jsondata = {
                PageIndex: this.currentPage,
                PageSize: this.pagesize,
                keyWords: this.search.keyWords
            };
            GetTest1List(jsondata).then(res => {

                if (res.data != undefined) {
                    that.list = res.data.list;
                    that.total = res.data.total;

                    that.$nextTick(function () {
                        that.reflushPageFlag = true;
                    });
                }
                that.closeLoading();
            }).catch(err => {
                this.$message.error("数据请求异常");
                that.closeLoading();
            })

        },

        //初始化表单
        initForm() {
            this.form.id = "";
            this.form.remark = "";
            this.form.col1 = ""; this.form.col2 = ""; this.form.createTime = ""; this.form.updateTime = "";

        },
        onAdd() {
            this.initForm();

            //有排序字段可以放开
            // if (this.list != null && this.list.length > 0) {
            //     let currentList = this.list.sort(function (a, b) { return b.sort - a.sort; })[0];
            //     this.form.sort = currentList.sort + 1;

            //     //重新排序一下 这是个小bug
            //     this.list.sort(function (a, b) { return a.sort - b.sort; });
            // }

            this.isAdd = true;
            this.dialogVisible = true;
            this.EditTitle = "新增";
        },
        onEdit(row) {
            this.initForm();
            this.isAdd = false;
            this.dialogVisible = true;
            this.EditTitle = "修改";

            //赋值
            this.form.id = row.id;
            this.form.remark = row.remark;
            this.form.col1 = row.col1; this.form.col2 = row.col2; this.form.createTime = row.createTime; this.form.updateTime = row.updateTime;
        },
        onDelete(row) {
            var that = this;
            this.$confirm("是否删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                that.openLoading();
                DeleteTest1(row.id).then(res => {
                    that.closeLoading();
                    console.log(res);
                    if (res.success) {
                        that.getList();
                        that.$message({ message: "删除成功", type: "success" });
                    } else {
                        that.$message.error(res.msg);
                    }
                }).catch(err => {
                    that.$message.error("删除失败");
                    that.closeLoading();
                })

            });
        },
        onSave() {
            var that = this;
            that.openLoading();

            SaveTest1(this.form).then(res => {
                console.log(res);
                that.closeLoading();
                if (res.success) {
                    that.$message({ message: "操作成功", type: "success" });
                    that.getList();
                    that.dialogVisible = false;
                } else {
                    that.$message.error(res.msg);
                }
            }).catch(err => {
                that.$message.error("操作失败");
                that.closeLoading();
            })

        },
        //当前条
        handleSizeChange(val) {
            this.pagesize = val;
            this.getList();
        },
        //当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
        },

    },
};
</script>

<style scoped>
.l-input {
    display: inline-block;
    width: 260px;
}

.l-input-form {
    display: inline-block;
    width: 220px;
}

.l-margin-l15 {
    margin-left: 15px;
}

.l-red {
    color: red;
}
</style>
                        